<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" href="/css/reset.css">
    <script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
    <style>
        #lottery{padding: 1px;width:100%;margin:0 auto;border:4px solid #ba1809;background:url(/img/laoyonghu.png);background-size: cover;}
        #lottery table tr{height: 33.3%}
        #lottery table td{position:relative;text-align:center;color:#333;}
        #lottery table td img{display:block;width:75px;height:75px;}
        #lottery table td a{width:100%;height:100%;display:block;text-decoration:none;
            /*background:url(/img/che.png) no-repeat top center;*/
        }
        #lottery table td a:hover{
            /*background-image:url(/img/che.png);*/
        }
        #lottery table td.active .mask{display:block;}
        .mask{
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            border: 5px solid #ff6600;
            display:none;
        }
        .frequency{
            width: 28%;
            height: 56px;
            font-size: 11px;
            color: #010100;
            text-align: center;
            margin-left: 44%;
        }
        .roll{
            width: 65%;
            height: 68px;
            margin: 50px 20%;
            line-height: 68px;
            text-align: center;
            font-size: 22px;
            color: #010100;
        }
        .rebox{
            width: 100%;
            background: url("/img/zhuce.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .close{
            width:50px;
            height: 50px;
            margin-left: 82%;
            margin-top: 174px;
        }
        .whole{
            width: 53%;
            height: 340px;
            margin: 655px auto;
        }
        .phoneCord{
            width: 52%;
            height: 48px;
            margin-left: 10%;
            margin-top: 34px;
            border: none;
            background: none;
            font-size: 24px;
            color: #b0b0b0;
            float: left;
            outline:none;
        }
        .obtain{
            background: #e14538;
            width: 26%;
            height: 44px;
            float: left;
            margin-left: 9%;
            margin-top: 54px;
            font-size: 17px;
            color: #fdf8e4;
            text-align: center;
            line-height: 32px;
            border: none;
            border-radius: 5px;
        }
        .obtain2{
            width: 26%;
            height: 32px;
            float: left;
            margin-left: 6%;
            margin-top: 44px;
            font-size: 17px;
            color: #fdf8e4;
            text-align: center;
            line-height: 32px;
        }
        .verificationCode{
            width: 64%;
            height: 48px;
            margin-top:6px;
            margin-left: 9%;
            font-size: 24px;
            color: #b0b0b0;
            border: none;
            background: none;
            outline:none;
        }
        .pictureCode{
            width: 52%;
            height: 48px;
            margin-left: 10%;
            margin-top: 40px;
            border: none;
            background: none;
            font-size: 24px;
            color: #b0b0b0;
            float: left;
            outline:none;
        }
        .confirm{
            width: 96%;
            height: 58px;
            margin-left: 4%;
            margin-top: 210px;
        }
        .display{
            display:none;
        }
        .reboxmemeda{
            width: 100%;
            background: url("/img/memeda.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .close2{
            width: 20px;
            height: 26px;
            margin-left: 82%;
            margin-top:60px;
        }
        .qitian{
            width: 100%;
            background: url("/img/qitian.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
       .ershihongbao{
           width: 100%;
           background: url("/img/ershihongbao.png");
           position: fixed;
           left:0;
           top:0;
           bottom:0;
           right:0;
           z-index:2;
           background-size: cover;
       }
        .sanshitian{
            width: 100%;
            background: url("/img/sanshitian.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .wushiyuan{
            width: 100%;
            background: url("/img/wushiyuan.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .baowenbei{
            width: 100%;
            background: url("/img/baowenbei.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .yibaiyuan{
            width: 100%;
            background: url("/img/yibaiyuan.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .jinghuaqi{
            width: 100%;
            background: url("/img/jinghuaqi.png");
            position: fixed;
            left:0;
            top:0;
            bottom:0;
            right:0;
            z-index:2;
            background-size: cover;
        }
        .layui-layer-dialog{
            min-width: auto;
        }
    </style>
</head>
<body class="keBody">
<div class="reboxmemeda display" id="memeda">
    <div class="close2" id="memedaclose"></div>
</div>
<div class="qitian display" id="qitian">
    <div class="close2" id="qitianclose"></div>
</div>
<div class="ershihongbao display" id="ershihongbao">
    <div class="close2" id="ershihongbaoclose"></div>
</div>
<div class="sanshitian display" id="sanshitian">
    <div class="close2" id="sanshitianclose"></div>
</div>
<div class="wushiyuan display" id="wushiyuan">
    <div class="close2" id="wushiyuanclose"></div>
</div>
<div class="baowenbei display" id="baowenbei">
    <div class="close2" id="baowenbeiclose"></div>
</div>
<div class="yibaiyuan display" id="yibaiyuan">
    <div class="close2" id="yibaiyuanclose"></div>
</div>
<div class="jinghuaqi display" id="jinghuaqi">
    <div class="close2" id="jinghuaqiclose"></div>
</div>
<!-- JiaThis Button BEGIN -->

<!--<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>-->
<!-- JiaThis Button END -->
<!--效果html开始-->
<div id="lottery">
    <input type="hidden" id="prize" value="">
    <div id="frequency" class="frequency">
        您有<span id="number"></span>次抽奖机会
    </div>
    <div style="overflow: hidden;position: relative ;margin-left: 20%;margin-top: 0" id="newse">
        <ul id="record" style="position:absolute;top:0;left:0;height:50px;">

        </ul>

    </div>
    <table border="0" id="tablew" cellpadding="0" cellspacing="0">
        <tr class="tr">
            <td class="lottery-unit lottery-unit-0"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-1"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-2"><div class="mask"></div></td>
        </tr>
        <tr class="tr">
            <td class="lottery-unit lottery-unit-7" ><div class="mask"></div></td>
            <td><a id="doLottery"></a></td>
            <td class="lottery-unit lottery-unit-3"><div class="mask"></div></td>
        </tr>
        <tr class="tr">
            <td class="lottery-unit lottery-unit-6"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-5"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-4"><div class="mask"></div></td>
        </tr>
    </table>
    <div id="ruleSee"></div>

</div>
<script type="text/javascript">

    /** 文字滚动效果 **/
    $.fn.textScroll = function () {
        var speed = 80, t = $(this), c = $(this).children(), l = $(this).find('li');
        var w = t.width()*5, w_c = 0;
        c.width(w)

        l.width(t.width());
        var tm = (w + w_c) * 1000 / speed;

        function run() {
            c.animate({left: -w}, 100000, "linear", function () {
                c.css("left", 0);
                run();
            });
        }

        run();
    }




    var w=document.body.clientWidth;
    var bgPic=document.querySelector('#lottery');
    bgPic.style.height=1334*w/750+'px';
//    配置
    $('#frequency').css('margin-top',400/750*w+'px');
    $('#frequency').css('width',220/750*w+'px');
    $('#frequency').css('height',30/750*w+'px');

    $('#tablew').css('width',460/750*w+'px');
    $('#tablew').css('height',460/750*w+'px');
    $('#tablew').css('margin-top',20/750*w+'px');
    $('#tablew').css('margin-left',152/750*w+'px');

    $('#fenxiang').css('width',192/750*w+'px');
    $('#fenxiang').css('height',50/750*w+'px');
    $('#fenxiang').css('margin-top',130/750*w+'px');
    $('#fenxiang').css('margin-left',147/750*w+'px');

    $('#ruleSee').css('width',192/750*w+'px')
    $('#ruleSee').css('height',50/750*w+'px')
    $('#ruleSee').css('margin-top',130/750*w+'px')
    $('#ruleSee').css('margin-left',400/750*w+'px')


    $('#newse').css('width',490/750*w+'px');
    $('#newse').css('height',100/750*w+'px');
    $('#record').css('height',100/750*w+'px');
    $('.lottery-unit').css('width',152/750*w+'px')
    $('.lottery-unit').css('height',152/750*w+'px')
    $('.tr').css('height',152/750*w+'px');
    //    中奖纪录
    $.ajax({
        type: "POST",
        url: "/lottery/lotteryList",
        data: {},
        dataType: "json",
        success: function (data) {

            var record=$('#record').html();
            var html='';
            for(var i=0;i<data.length;i++){

                html+="<li class='li2' style='float:left;text-align: center'>"+
                        "<p class='content'>"+data[i].mobile+'抽中'+data[i].goodsName+"</p></li>"
            }
            $('#record').html(html);
            $('.li2').css('line-height',138/750*w+'px');
            $("#newse").textScroll();
        }
    });



    //公告轮播

    var $this = $("#news");
    var scrollTimer;
    $this.hover(function () {
        clearInterval(scrollTimer);
    }, function () {
        scrollTimer = setInterval(function () {
            scrollNews($this);
        }, 2000);
    }).trigger("mouseleave");

    function scrollNews(obj) {
        var $self = obj.find("ul");
        var lineWidth = $self.find("li:first").width();
        $self.find("li:first").animate({
            "marginLeft": -lineWidth + "px"
        }, 600, function () {
            $self.css({
                marginLeft: 0
            }).find("li:first").appendTo($self);
        })
    }


    $('#ruleSee').bind('click',function(){
        window.location.href='/html/rules.html'
    })
    $('#memedaclose').bind('click',function(){
        $('#memeda').addClass('display')
    })
    $('#qitianclose').bind('click',function(){
        $('#qitian').addClass('display')
    })
    $('#ershihongbaoclose').bind('click',function(){
        $('#ershihongbao').addClass('display')
    })
    $('#sanshitianclose').bind('click',function(){
        $('#sanshitian').addClass('display')
    })
    $('#wushiyuanclose').bind('click',function(){
        $('#wushiyuan').addClass('display')
    })
    $('#baowenbeiclose').bind('click',function(){
        $('#baowenbei').addClass('display')
    })
    $('#yibaiyuanclose').bind('click',function(){
        $('#yibaiyuan').addClass('display')
    })
    $('#jinghuaqiclose').bind('click',function(){
        $('#jinghuaqi').addClass('display')
    })




    var lottery={
        index:-1,    //当前转动到哪个位置，起点位置
        count:8,    //总共有多少个位置
        timer:0,    //setTimeout的ID，用clearTimeout清除
        speed:20,    //初始转动速度
        times:0,    //转动次数
        cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize:-1,    //中奖位置
        init:function(id){
            if ($("#"+id).find(".lottery-unit").length>0) {
                    $lottery = $("#"+id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-"+this.index).addClass("active");
            };
        },
        roll:function(){
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };

    function roll(){
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
            clearTimeout(lottery.timer);

            lottery.prize=-1;
            lottery.times=0;
            number();
            setTimeout(function(){
                if( $('#prize').val()==2){
                    $('#memeda').removeClass('display')
                }else if($('#prize').val()==7){
                    $('#qitian').removeClass('display')
                }else if( $('#prize').val()==0){
                    $('#ershihongbao').removeClass('display')
                }else if(  $('#prize').val()==1){
                    $('#sanshitian').removeClass('display')
                }else if( $('#prize').val()==6){
                    $('#wushiyuan').removeClass('display')
                }else if($('#prize').val()==5){
                    $('#baowenbei').removeClass('display')
                }else if($('#prize').val()==4){
                    $('#yibaiyuan').removeClass('display')
                }else if($('#prize').val()==3){
                    $('#jinghuaqqi').removeClass('display')
                }
            },1000);
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {
                lottery.prize = $('#prize').val();
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
//          console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);//循环调用
        }
        return false;
    }

    var click=false;

        number();
        lottery.init('lottery');
        function number(){
            $.ajax({
                type: "POST",
                url: "/user/lottery/countNum",
                dataType: "json",
                success: function (data) {

                    $('#number').html(data);
                    if(parseInt(data)>0){
                        click=true;
                    }
                }
            });
        }

    $("#doLottery").click(function(){
        if(click) {
            click = false;
            $.ajax({
                type: "POST",
                url: "/user/lottery/doLottery",
                dataType: "json",
                success: function (data) {
                    if (data.result == 'fail') {
                        if (data.messageCode == 'sys.error') {
                            alert('系统异常');
                        } else {
                            alert(data.messageText);
                        }
                        number();
                    } else {
                        if (data.rewardId == '30') {
                            $('#prize').val(2)
                        } else if (data.rewardId == '23') {
                            $('#prize').val(7)
                        } else if (data.rewardId == '24') {
                            $('#prize').val(0)
                        } else if (data.rewardId == '25') {
                            $('#prize').val(1)
                        } else if (data.rewardId == '26') {
                            $('#prize').val(6)
                        } else if (data.rewardId == '27') {
                            $('#prize').val(5)
                        } else if (data.rewardId == '28') {
                            $('#prize').val(4)
                        } else if (data.rewardId == '29') {
                            $('#prize').val(3)
                        }

                        lottery.speed = 100;
                        roll();
                    }


                }
            });
        }else if($('#number').html()==0){
           alert('无更多抽奖次数');
        }
    });



</script>
<!--效果html结束-->

</body>
</html>